<template>
	<u-navbar :title="'编辑' + info.title"></u-navbar>
	<view class="textarea">
		<view class="title">{{info.title}}</view>
		<u-input v-model="info.value" type="textarea" border :height="344" :auto-height="false" :placeholder="info.placeholder" :maxlength="info.maxlength" />
		<view style="color: #999999;position: absolute;bottom: 13rpx;right: 17rpx;" class="font-24">
			{{info.value.length}} / {{info.maxlength}}
		</view>
	</view>
	
	<view class="textarea">
		<view class="flex flex-ai-c flex-jc-sb font-24 font-bold" style="margin: 40rpx 0 35rpx;">
			<view>试试这样写</view>
			<view @click="getExample">
				<i-icon icon="icon-change" size="22rpx" />
				换一组
			</view>
		</view>
		
		<view style="line-height: 60rpx;background: #F8F8F8;padding: 0 20rpx;">
			<rich-text :nodes="info.eg_content"></rich-text>
		</view>
	</view>

	<view class="btn" @click="editMemberInfo">
		保 存
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import user from '../../api/user'
	import common from '../../api/common'
	let info = reactive({
		title: '',
		value: '',
		placeholder: '',
		maxlength: 100,
		type: null,
		feild: '',
		eg_content: '',
		id: null
	})
	const getExample = async () => {
		const res = await common.getExample({
			type: info.type
		})
		info.eg_content = res.data.eg_content
	}
	const editMemberInfo = () => {
		uni.showLoading()
		user.editMemberInfo({
			[info.feild]: info.value,
			id: info.id
		}).then((res) => {
			if(res.code === 0) {
				uni.navigateBack()
			}
			if (res.code === 200) {
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.value = {
					text: info.value,
					type: info.type
				}
				uni.navigateBack()
			} else {
				uni.showToast({
					title: '保存失败',
					icon: 'none'
				})
			}
			uni.hideLoading()
		}).catch(() => {
			uni.hideLoading()
			uni.showToast({
				title: '保存失败',
				icon: 'none'
			})
		})
	
	}
	onLoad((op) => {
		info.id = op.id
		uni.$once('info',(v: any) => {
			info.value = v
		})
		info.type = op.type
		switch (op.type) {
			case '1':
				info.title = '座右铭'
				info.placeholder = '写出你的座右铭'
				info.feild = 'motto'
				info.maxlength = 30
			break
			case '2':
				info.title = '关于我'
				info.placeholder = '丰富的个人经历介绍，让大家更好的认识你'
				info.feild = 'about_us'
				info.maxlength = 500
			break
			case '3':
				info.title = '我能提供'
				info.placeholder = '可填写你能提供的相关信息'
				info.feild = 'provide'
				info.maxlength = 500
			break
			case '4':
				info.title = '近期需求'
				info.placeholder = '可填写你的近期需求'
				info.feild = 'demand'
				info.maxlength = 500
			break
		}
		getExample()
	})
</script>

<style lang="scss">
	:deep(.uni-textarea-wrapper){
		font-size: 30rpx;
	}
	.btn{
		position: fixed;
		bottom: 79rpx;
		width: calc(100% - 74rpx);
		left: 37rpx;
		height: 78rpx;
		background: #000000;
		border-radius: 39rpx;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		line-height: 78rpx;
	}
	.textarea{
		position: relative;
		margin: 0 32rpx;
		.title{
			font-weight: 600;
			font-size: 30rpx;
			color: #333333;
			margin: 44rpx 0 30rpx;
		}
	}
</style>